<template>
	<view>
		<view class="log-detail" v-if="!pageLoading">
			<view class="section p-30">
				<view class="title  ">{{info.title}}</view>
				<view class="metas mt-20">
					<view><u-icon name="map" :customStyle="{marginRight:'2px'}"></u-icon><text>{{info.location}}</text></view>
					<view><u-icon name="account" :customStyle="{marginRight:'2px'}"></u-icon><text>{{info.reportedBy}}</text></view>
				</view>
			</view>
			<view class="section process p-30">
				<view class="title  pb-30">服务进度</view>
				<view class="description">{{info.description}}</view>
				<u-steps :current="info.processSteps.length" direction="column" v-if="info.processSteps">
					<u-steps-item v-for="item in info.processSteps" :title="item.stepName"
						:desc="item.details + '\\n' + item.timestamp+ '\\n' + item.executor">
					</u-steps-item>
				</u-steps>
			</view>
			<view class="section process p-30">
				<view class="title  pb-30">相关人员</view>
				<view class="participants-list">
					<view class="participants-item" v-for="item in info.participants">
						<view class="top">
							<view class="name">{{item.name}} </view>
							<view class="role">{{item.role}}</view>
						</view>
						<view class="bottom">
							{{item.contactInfo}}
						</view>
					</view>
				</view>
			</view>
			<view style="height:30rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		getServiceLogDetail
	} from '@/config/api.js'

	export default {
		data() {
			return {
				pageLoading:true,
				info: {
					"title": "路灯故障维修",
					"location": "阳光大道23号",
					"description": "在例行网格巡查中，发现一盏路灯故障，影响夜间视线。",
					"reportedBy": "网格员张三",
					"reportTime": "2025-03-04T09:15:00",
					"status": "已完成",
					"resolution": "更换电路元件，恢复路灯正常使用",
					"satisfaction": 5,
					"processSteps": [{
							"stepName": "问题发现",
							"executor": "网格员李明",
							"timestamp": "2025-03-04T09:15:00",
							"details": "网格员例行巡查发现路灯故障"
						},
						{
							"stepName": "问题上报",
							"executor": "网格员李明",
							"timestamp": "2025-03-04T09:30:00",
							"details": "通过系统上报至市政维修部门"
						},
						{
							"stepName": "现场勘察",
							"executor": "维修人员王工",
							"timestamp": "2025-03-04T11:45:00",
							"details": "维修人员到场确认故障原因"
						},
						{
							"stepName": "故障修复",
							"executor": "维修人员王工",
							"timestamp": "2025-03-04T15:20:00",
							"details": "更换电路元件，恢复路灯正常使用"
						},
						{
							"stepName": "回访确认",
							"executor": "网格员李明",
							"timestamp": "2025-03-04T19:00:00",
							"details": "确认路灯正常工作并收集居民反馈"
						}
					],
					"participants": [{
							"name": "李明",
							"role": "网格员",
							"contactInfo": "133-XXXX-XXXX"
						},
						{
							"name": "王工",
							"role": "维修人员",
							"contactInfo": "132-XXXX-XXXX"
						},
						{
							"name": "张主任",
							"role": "社区负责人",
							"contactInfo": "135-XXXX-XXXX"
						},
						{
							"name": "刘组长",
							"role": "质检员",
							"contactInfo": "136-XXXX-XXXX"
						}
					]
				}
			};
		},
		onLoad(options) {
			getServiceLogDetail(options.id).then(res=>{
				console.log(res)
				this.pageLoading = false;
			})
		},
		methods: {

		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.section {
		border-radius: 10px;
		background-color: white;
		width: calc(100% - 60rpx);
		margin-left: auto;
		margin-right: auto;
		margin-top: 30rpx;

		.title {
			font-size: 17px;
			font-weight: bold;
		}
	}
	.metas{
		display: flex;
		align-items: center;
	
		&>view{
			font-size:14px;
			color:#999999;
			margin-right: 10px;
			display: flex;
			align-items: center;
			&>text{
				margin-right: 2px;
			}
		}
	}
	.participants-list {
		display:flex;
		flex-wrap: wrap;
		margin-left: -5px;
		margin-right: -5px;
		.participants-item {
			width: calc(50% - 10px);
			margin:5px;
			border:1rpx solid #eee;
			padding:10px;
			border-radius: 5px;
			.top {
				display: flex;
				align-items: flex-end;

				.name {
					font-size: 14px;
					color: #333;
					flex-shrink: 0;
				}

				.role {
					margin-left: 10rpx;
					font-size: 12px;
					color: #999;
				}
			}
			.bottom{
				margin-top: 20rpx;
				font-size: 12px;
				color: #999;
			}
		}
	}
</style>